<template>
  <div>
    <van-nav-bar safe-area-inset-top placeholder :title="sn" left-arrow fixed @click-left="onClickLeft" />
    <van-pull-refresh v-model="isLoading" :pulling-text="$t('PullingText')" :loosing-text="$t('PullingText')" :success-text="$t('refreshSuccee')" @refresh="onRefresh">
      <!-- 功率图 -->
      <div id="powerChart" :style="{width: '100%', height: '300px',margin:'15px 0 0 0'}"></div>

      <div class="selectBox">
        <!-- 年月日 -->
        <div class="sel" @click="showPicker2 = true">{{value2}}</div>
        <van-popup v-model="showPicker2" round position="bottom">
          <van-picker
            show-toolbar
            :columns="columns2"
            :confirm-button-text="$t('OK')"
            :cancel-button-text="$t('Cancel')"
            @cancel="showPicker2 = false"
            @confirm="onConfirm2"
          />
        </van-popup>
        <!-- 年月选择框 -->
        <div class="sel" @click="showPicker3 = true" v-if="value2==$t('Month')">{{timeVal}}</div>
        <van-popup v-model="showPicker3" round position="bottom">
          <van-datetime-picker
            v-model="currentDate"
            type="year-month"
            :confirm-button-text="$t('OK')"
            :cancel-button-text="$t('Cancel')"
            @cancel="showPicker3 = false"
            @confirm="onConfirm3"
          />
        </van-popup>
        <!-- 年选择框 -->
        <div class="sel" @click="showPicker4 = true" v-if="value2==$t('Year')">{{value4}}</div>
        <van-popup v-model="showPicker4" round position="bottom">
          <van-picker
            show-toolbar
            :columns="columns4"
            :confirm-button-text="$t('OK')"
            :cancel-button-text="$t('Cancel')"
            @cancel="showPicker4 = false"
            @confirm="onConfirm4"
          />
        </van-popup>
      </div>
      <div id="yeildChart" :style="{width: '100%', height: '280px'}"></div>
    </van-pull-refresh>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  data(){
    return {
      from:sessionStorage.getItem('setFrom'),
      isLoading:false,
      inverterType:localStorage.getItem('inverterType'),
      sn:localStorage.getItem('sn'),
      value2: this.$t('Month'),
      timeNameCode:2,
      value4:(new Date()).getFullYear(),
      showPicker2: false,
      showPicker3: false,
      showPicker4: false,
      columns2: [this.$t('Month'), this.$t('Year'),this.$t('AllYear')],
      currentDate:new Date(),
      timeVal:moment(new Date()).format('YYYY/MM'),
      columns4:this.getYear(),
      dataCurrent:[moment(new Date()).format('YYYY'),moment(new Date()).format('MM')],
      siteId:localStorage.getItem('siteId'),
      fifteenRefresh:null
    }
  },
  methods: {
    onClickLeft(){
      this.$router.push({path:this.from});
    },
    onConfirm2(value,code) {
      this.value2 = value;
      this.showPicker2 = false;
      if(code==0){
        this.dataCurrent=this.timeVal.split("/");
      }else if(code==1){
        this.dataCurrent=[this.value4,moment(new Date()).format('MM')];
      }else if(code==2){
        this.dataCurrent=[moment(new Date()).format('YYYY'),moment(new Date()).format('MM')];
      }
      this.timeNameCode=code+2;
      this.getYielCharts(this.timeNameCode,...this.dataCurrent);
    },
    onConfirm3(value) {
      this.showPicker3 = false;
      this.timeVal=moment(value).format('YYYY/MM');
      this.dataCurrent=this.timeVal.split("/");
      this.getYielCharts(this.timeNameCode,...this.dataCurrent);
    },
    onConfirm4(value) {
      this.value4 = value;
      this.showPicker4 = false;
      this.dataCurrent=[this.value4,moment(new Date()).format('MM')];
      this.getYielCharts(this.timeNameCode,...this.dataCurrent);
    },
    getYear(){
      let years=(new Date()).getFullYear()-2017;
      let yearsArr=[];
      for(let i=0;i<=years;i++){
        yearsArr.push(2017+i);
      }
      return yearsArr;
    },
    async getDailyInfo(){
      this.comm.loadingShow();
      let data = await this.API.getDailyInfo(localStorage.getItem('domain'),{
        'tokenId':localStorage.getItem("tokenId"),
        'inverterSn':localStorage.getItem('sn'),
        'wifiSn': localStorage.getItem("wifiSN"),
        'time':moment(new Date()).format('YYYY/MM/DD'),
        'userId':localStorage.getItem("userId")
      });
      if(data!=null){
        if(this.inverterType==3||this.inverterType==5||this.inverterType==10||this.inverterType==11||this.inverterType==12||this.inverterType==13||this.inverterType==14||this.inverterType==15){
          let [times,pv,ac,eps]=[[],[],[],[]];
          for(let i= 0;i<data.length;i++){
            let arrs=(data[i].uploadTimeValue).split(' ');
            arrs=arrs[arrs.length-1];
            arrs=arrs.split(":");
            arrs=arrs.slice(0,2);
            arrs=arrs.join(":");
            times.push(arrs);
            pv.push((data[i].powerdc||0).toFixed(1));
            ac.push((data[i].gridpower||0).toFixed(1));
            eps.push((data[i].epsPower||0).toFixed(1));
          }
          let legend=[this.$t('PVPower'), this.$t('ACPower'), this.$t('EPSPower')];
          let series=[
            {name: legend[0],type: 'line',symbol: 'none',smooth: true,itemStyle: {normal: {color: '#F4B600'}},data: pv},
            {name: legend[1],type: 'line',smooth: true,symbol: 'none',itemStyle: {normal: {color: '#72BC38'}},data: ac},
            {name: legend[2],type: 'line',smooth: true,symbol: 'none',itemStyle: {normal: {color: '#A27612'}},data: eps}
          ];
          this.powerChart=this.commChart.lineChart('powerChart',times,legend,series);
        }else{
          let [times,pv,ac]=[[],[],[]];
          for(let i= 0;i<data.length;i++){
            let arrs=(data[i].uploadTimeValue).split(' ');
            arrs=arrs[arrs.length-1];
            arrs=arrs.split(":");
            arrs=arrs.slice(0,2);
            arrs=arrs.join(":");
            times.push(arrs);
            pv.push((data[i].powerdc||0).toFixed(1));
            ac.push((data[i].gridpower||0).toFixed(1));
          }
          let legend=[this.$t('PVPower'), this.$t('ACPower')];
          let series=[
            {name: legend[0],type: 'line',symbol: 'none',smooth: true,itemStyle: {normal: {color: '#F4B600'}},data: pv},
            {name: legend[1],type: 'line',smooth: true,symbol: 'none',itemStyle: {normal: {color: '#72BC38'}},data: ac}
          ];
          this.powerChart=this.commChart.lineChart('powerChart',times,legend,series);
        }
      }
    },
    async getYielCharts(reportType,year,month){
      this.comm.loadingShow();
      let data = await this.API.getYield(localStorage.getItem('domain'),{
        'reportType': reportType,
        'tokenId': localStorage.getItem("tokenId"),
        'siteId': this.siteId,
        'inverterSn': localStorage.getItem("sn"),
        'wifiSn': localStorage.getItem("wifiSN"),
        'year': year,
        'month': month,
        'webTime': moment(new Date()).format('YYYY,MM,DD')
      });
      if(data.returnList!==null){
        this.switchChart(data.returnList);
      }
    },
    switchChart(data){
      if(this.inverterType==3||this.inverterType==5||this.inverterType==10||this.inverterType==11||this.inverterType==12||this.inverterType==13||this.inverterType==14||this.inverterType==15){
        let [times,y1,y2]=[[],[],[]];
        for(let i= 0;i<data.length;i++){
          times.push(data[i].time);//横坐标
          y1.push((data[i].yieldtoday).toFixed(2));
          y2.push((data[i].epsEnergy).toFixed(2));
        }
        let legend=[this.$t('FeedInEnergy'),this.$t('EPSEnergy')];
        let color=['#6DA719','#A27612'];
        let series=[
          {name: this.$t('FeedInEnergy'),type: 'bar',stack: this.$t('EPSEnergy'),data: y1},
          {name: this.$t('EPSEnergy'),type: 'bar',stack: this.$t('EPSEnergy'),data: y2}
        ];
        this.commChart.barChart('yeildChart',color,this.timeNameCode,times,legend,series);
      }else{
        let [times,y]=[[],[]];
        for(let i= 0;i<data.length;i++){
          times.push(data[i].time);//横坐标
          y.push((data[i].yieldtoday).toFixed(2));
        }
        let legend=[this.$t('FeedInEnergy')];
        let color=['#6DA719'];
        let series=[
          {name: this.$t('FeedInEnergy'),type: 'bar',stack: this.$t('FeedInEnergy'),data: y}
        ];
        this.commChart.barChart('yeildChart',color,this.timeNameCode,times,legend,series);
      }
    },
    onRefresh(){
      this.isLoading=false;
      this.getDailyInfo();
      this.getYielCharts(this.timeNameCode,...this.dataCurrent);
    }
  },
  mounted(){
    //判断siteid
    if(this.from=='/siteinvlist'){
      this.siteId=localStorage.getItem('siteId');
    }else{
      this.siteId=sessionStorage.getItem('siteId');
    }
    this.getDailyInfo();
    this.getYielCharts(2,...this.dataCurrent);
    this.fifteenRefresh=setInterval(()=>{
      this.getDailyInfo();
      this.getYielCharts(this.timeNameCode,...this.dataCurrent);
    },900000);
  },
  destroyed(){
    clearInterval(this.fifteenRefresh);
    this.fifteenRefresh=null;
  }
}
</script>

<style scoped lang="less" >
.selectBox{
  width: 100%;
  display: flex;
  padding: 20px 0 10px 0;
}
</style>
